<template>
    <div>
        <el-form
                ref="dataForm"
                status-icon
                :model="form"
                :rules="rules"
                label-width="0px"
        >
            <template>
                <div>
                    <h5>基本信息</h5>
                    <el-divider></el-divider>
                </div>
            </template>
            <el-descriptions :column="4" border>
                <el-descriptions-item labelStyle="width: 10%" contentStyle="width: 15%">
                    <template slot="label"> 姓名</template>
                    <div>{{ form.name }}</div>
                </el-descriptions-item>

                <el-descriptions-item labelStyle="width: 10%" contentStyle="width: 15%">
                    <template slot="label">性别</template>
                    <div>{{ form.sex }}</div>
                </el-descriptions-item>
                <el-descriptions-item labelStyle="width: 10%" contentStyle="width: 15%">
                    <template slot="label">身份证号码</template>
                    <div>{{ form.sfz }}</div>
                </el-descriptions-item>

                <el-descriptions-item labelStyle="width: 10%" contentStyle="width: 15%">
                    <template slot="label">出生日期</template>
                    <div>{{ form.birthday }}</div>
                </el-descriptions-item>
                <el-descriptions-item labelStyle="width: 10%" contentStyle="width: 15%">
                    <template slot="label">系统唯一识别码</template>
                    <div>{{ form.id_num }}</div>
                </el-descriptions-item>
                <el-descriptions-item labelStyle="width: 10%" contentStyle="width: 15%">
                    <template slot="label">电话号码</template>
                    <div>{{ form.phone }}</div>
                </el-descriptions-item>

                <el-descriptions-item
                        labelStyle="width: 10%"
                        contentStyle="width: 90%"
                        span="4"
                >
                    <template slot="label">联系地址</template>
                    <div>
                        {{ form.province_name }} {{ form.city_name }}
                        {{ form.district_name }} {{ form.town_name }}
                        {{ form.village_name }} {{ form.address }}
                    </div>
                </el-descriptions-item>

            </el-descriptions>

            <template>
                <div>
                    <h5>内镜诊断</h5>
                    <el-divider></el-divider>
                </div>
            </template>
            <el-descriptions :column="4" border>

                <el-descriptions-item labelStyle="width: 10%" contentStyle="width: 15%">
                    <template slot="label"> 内镜编号</template>
                    <el-form-item prop="endoscope_code">
                        <el-input v-model="form.endoscope_code" placeholder="请填写内镜编号"></el-input>
                    </el-form-item>
                </el-descriptions-item>

                <el-descriptions-item labelStyle="width: 10%" contentStyle="width: 15%">
                    <template slot="label"> 纤支镜类型</template>
                    <el-form-item prop="enteroscope_type">
                        <el-select clearable placeholder="请选择" style="width: 100%"
                                   v-model="form.enteroscope_type">
                            <el-option
                                    :key="item.value"
                                    :label="item.text"
                                    :value="item.value"
                                    v-for="item in enteroscopeTypeList"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-descriptions-item>

                <el-descriptions-item labelStyle="width: 10%" contentStyle="width: 15%">
                    <template slot="label"> 是否活检</template>
                    <el-form-item prop="biopsy">
                        <el-radio-group v-model="form.biopsy" @change="changeBiopsy()">
                            <el-radio
                                    v-for="(item, index) in whetherList"
                                    :key="index"
                                    :label="item.value"
                            >{{ item.text }}
                            </el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-descriptions-item>

                <el-descriptions-item labelStyle="width: 10%" contentStyle="width: 15%">
                    <template slot="label"> 活检部位</template>
                    <el-form-item prop="biopsy_part">
                        <el-select clearable placeholder="请选择" style="width: 100%"
                                   v-model="form.biopsy_part" :disabled="form.biopsy=='0'">
                            <el-option
                                    :key="item.value"
                                    :label="item.text"
                                    :value="item.value"
                                    v-for="item in biopsyPartList"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-descriptions-item>

                <el-descriptions-item labelStyle="width: 10%" contentStyle="width: 15%">
                    <template slot="label"> 镜下管壁所见</template>
                    <el-form-item prop="enteroscope_tube_wall">
                        <el-input v-model="form.enteroscope_tube_wall" placeholder="请输入镜下管壁所见"></el-input>
                    </el-form-item>
                </el-descriptions-item>

                <el-descriptions-item labelStyle="width: 10%" contentStyle="width: 15%">
                    <template slot="label"> 镜下管腔所见</template>
                    <el-form-item prop="lumen">
                        <el-input v-model="form.lumen" placeholder="请输入镜下管腔所见"></el-input>
                    </el-form-item>
                </el-descriptions-item>

                <el-descriptions-item labelStyle="width: 10%" contentStyle="width: 15%">
                    <template slot="label"> 管腔内异常物质</template>
                    <el-form-item prop="lumen_foreign_matter">
                        <el-input v-model="form.lumen_foreign_matter" placeholder="请输入管腔内异常物质"></el-input>
                    </el-form-item>
                </el-descriptions-item>

                <el-descriptions-item labelStyle="width: 10%" contentStyle="width: 15%">
                    <template slot="label"> 异物距隆突距离（cm）</template>
                    <el-form-item prop="lumen_foreign_matter_cm1">
                        <el-input v-model="form.lumen_foreign_matter_cm1" placeholder="请输入异物距隆突距离"></el-input>
                    </el-form-item>
                </el-descriptions-item>

                <el-descriptions-item labelStyle="width: 10%" contentStyle="width: 15%">
                    <template slot="label"> 异物距支气管开口距离（cm）</template>
                    <el-form-item prop="lumen_foreign_matter_cm2">
                        <el-input v-model="form.lumen_foreign_matter_cm2" placeholder="请输入异物距支气管开口距离"></el-input>
                    </el-form-item>
                </el-descriptions-item>

                <el-descriptions-item labelStyle="width: 10%" contentStyle="width: 15%">
                    <template slot="label"> 内镜日期</template>
                    <el-form-item prop="enteroscope_date">
                        <el-date-picker
                                style="width:100%"
                                v-model="form.enteroscope_date"
                                type="date"
                                placeholder="选择日期"
                                :value-format="'yyyy-MM-dd'"
                                clearable
                        >
                        </el-date-picker>
                    </el-form-item>
                </el-descriptions-item>

                <el-descriptions-item span="2" labelStyle="width: 10%" contentStyle="width: 65%">
                    <template slot="label"> 内镜诊断</template>
                    <el-form-item prop="enteroscope_diagnose">
                        <el-input v-model="form.enteroscope_diagnose" placeholder="请输入内镜诊断"></el-input>
                    </el-form-item>
                </el-descriptions-item>

                <el-descriptions-item labelStyle="width: 10%" contentStyle="width: 15%">
                    <template slot="label"> 气管开口</template>
                    <el-form-item prop="trache_open">
                        <el-select clearable placeholder="请选择" style="width: 100%" v-model="form.trache_open">
                            <el-option
                                    :key="item.value"
                                    :label="item.text"
                                    :value="item.value"
                                    v-for="item in tracheOpenList"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-descriptions-item>

                <el-descriptions-item labelStyle="width: 10%" contentStyle="width: 15%">
                    <template slot="label"> 治疗意见</template>
                    <el-form-item prop="treatment_opinion">
                        <el-radio-group v-model="form.treatment_opinion">
                            <el-radio
                                    v-for="(item, index) in whetherList2"
                                    :key="index"
                                    :label="item.value"
                            >{{ item.text }}
                            </el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-descriptions-item>

                <el-descriptions-item span="2" labelStyle="width: 10%" contentStyle="width: 40%">
                    <template slot="label"> 备注</template>
                    <el-form-item prop="enteroscope_remark">
                        <el-input type="textarea" v-model="form.enteroscope_remark"></el-input>
                    </el-form-item>
                </el-descriptions-item>

            </el-descriptions>

            <el-descriptions :column="1" border v-if="dialogStatus !== 'formal'">
                <el-descriptions-item labelStyle="width: 10%" contentStyle="width: 90%">
                    <el-form-item label=" ">
                        <el-button @click="handleDialogVisible(false)" size="small"
                        >取 消
                        </el-button
                        >
                        <el-button
                                type="primary"
                                @click="update()"
                                size="small"
                        >确 定
                        </el-button>
                    </el-form-item>
                </el-descriptions-item>
            </el-descriptions>
        </el-form>
    </div>
</template>

<script>

    import {createData, updateData} from '@/api/data/data';
    import {listMember} from "@/api/member/member";
    import moment from "moment";

    export default {
        props: ["rowData", "dialogStatus"],
        components: {},
        data() {
            return {
                form: {
                    id: "",
                    endoscope_code: "",  //内镜编号
                    enteroscope_type: "",  //纤支镜类型
                    biopsy: 0,  //是否活检
                    biopsy_part: "",  //活检部位
                    enteroscope_tube_wall: "",  //镜下管壁所见
                    lumen: "",  //镜下管腔所见
                    lumen_foreign_matter: "",  //管腔内异常物质
                    lumen_foreign_matter_cm1: "",  //异物距隆突距离（cm）
                    lumen_foreign_matter_cm2: "",  //异物距支气管开口距离（cm）
                    enteroscope_date: "",  //内镜日期
                    enteroscope_diagnose: "",  //内镜诊断
                    trache_open: "",  //气管开口
                    treatment_opinion: 0,  //治疗意见
                    enteroscope_remark: "",  //备注
                    scene: 'enteroscope',
                },
                rules: {
                    // endoscope_code: [{required: true, message: "请输入内镜编号", trigger: "blur"}],
                    // enteroscope_type: [{required: true, message: "请选择纤支镜类型", trigger: "blur"}],
                    // biopsy: [{required: true, message: "请选择是否活检", trigger: "blur"}],
                    // biopsy_part: [{required: false, message: "请选择活检部位", trigger: "blur"}],
                    // enteroscope_date: [{required: true, message: "请选择内镜日期", trigger: "blur"}],
                    // enteroscope_diagnose: [{required: true, message: "请输入内镜诊断", trigger: "blur"}],
                    // trache_open: [{required: true, message: "请选择气管开口", trigger: "blur"}],
                    // treatment_opinion: [{required: true, message: "请选择治疗意见", trigger: "blur"}],
                },
                updateLoading: false,
                memberList: [],
                tracheOpenList: [
                    {text: "部分阻塞", value: 1},
                    {text: "完全阻塞", value: 2},
                    {text: "通畅", value: 3}
                ],
                whetherList: [
                    {text: "否", value: 0},
                    {text: "是", value: 1}
                ],
                whetherList2: [
                    {text: "继续观察", value: 0},
                    {text: "治疗", value: 1}
                ],
                enteroscopeTypeList: [
                    {text: "普通纤支镜", value: 1},
                    {text: "荧光纤支镜", value: 2},
                    {text: "磁导航纤支镜", value: 3},
                    {text: "E-BUS", value: 4}
                ],
                biopsyPartList: [
                    {text: "气管", value: 1},
                    {text: "右主支气管", value: 2},
                    {text: "右上叶", value: 3},
                    {text: "右中叶", value: 4},
                    {text: "右下页", value: 5},
                    {text: "左主支气管", value: 6},
                    {text: "左上叶", value: 7},
                    {text: "左下叶", value: 8},
                ],

            };
        },
        created() {
            this.getListMember();
            if (this.dialogStatus == "update" || this.dialogStatus == "formal") {
                this.form = {...this.rowData};

                this.form.sarcoidosis = this.form.sarcoidosis ? JSON.parse(this.form.sarcoidosis) : [];
                this.form.lymph = this.form.lymph ? JSON.parse(this.form.lymph) : [];
                this.form.lump = this.form.lump ? JSON.parse(this.form.lump) : [];

                if (!this.form.enteroscope_date) {
                    this.form.enteroscope_date = moment().format('YYYY-MM-DD');
                }

            }
        },
        methods: {
            changeBiopsy() {
                if (this.form.biopsy == 0) {
                    this.rules.biopsy_part[0].required = false;
                } else {
                    this.rules.biopsy_part[0].required = true;
                }
            },
            getListMember() {
                let params = {
                    user_name: "",
                    status: "",
                    institution_id: this.$store.state.member.institution_id,
                    pageSize: 1000,
                    page: 1,
                };
                listMember(params).then((res) => {
                    if (res.code === 200) {
                        this.memberList = res.data.data;
                    } else {
                        this.msgError(res.msg);
                    }
                });
            },
            //父页面的回调事件
            handleDialogVisible(isUpdate) {
                this.dialogVisible = false;
                this.$emit("childByDialogVisible", this.dialogVisible, isUpdate);
            },
            //修改
            update() {
                this.form.scene = 'enteroscope';
                this.$refs["dataForm"].validate((valid) => {
                    if (valid) {
                        this.updateLoading = true;
                        updateData(this.form).then((response) => {
                            this.updateLoading = false;
                            if (response.code == 200) {
                                this.msgSuccess(response.msg);
                                this.handleDialogVisible(true);
                            }
                        });
                    }
                });
            },
        },
        watch: {},
    };
</script>
<style lang="scss" scoped="scoped">
    .el-form-item {
        margin: 0px;
    }

    .red {
        color: red;
    }

    .el-form-item {
        margin: 0;
    }

    .el-ul {
        list-style: none;
        padding: 0;
    }

    .el-list-li {
        float: left;
        position: relative;
        padding: 10px 10px 0px 0px;
    }

    .el-icon-circle-close {
        position: absolute;
        top: 0px;
        right: 0px;
        z-index: 2;
        font-size: 20px;
    }
</style>
